<template>
  <div class>
    <div class="card tr mb2">
      <el-tooltip content="显示字段筛选" placement="bottom" effect="light">
        <el-popover placement="bottom" width="200" trigger="click">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="showItemList" @change="handleCheckedChange">
            <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
        </el-popover>
      </el-tooltip>
      <el-tooltip content="展开/收起表单" placement="bottom" effect="light">
        <el-button icon="el-icon-search" @click="formShow= !formShow" size="mini" type="primary" circle></el-button>
      </el-tooltip>
      <el-tooltip content="下载当前表格数据" placement="bottom" effect="light">
        <el-button icon="el-icon-download" @click="handleDownload" size="mini" type="primary" circle></el-button>
      </el-tooltip>
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="showDialog">添加</el-button>
    </div>
    <div class="card" v-show="formShow">
      <el-form size="mini" :style="style" :model="ruleForm" ref="ruleForm" inline label-width="100px" class="demo-ruleForm">
        <my-form-item label="业务品种" prop="serviceType">
          <el-select v-model="ruleForm.serviceType" size="mini">
            <el-option label="请选择" value=""></el-option>
            <el-option label="融资性担保" value="1"></el-option>
            <el-option label="非融资性担保" value="2"></el-option>
            <el-option label="综合授信" value="3"></el-option>
            <el-option label="委托贷款" value="4"></el-option>
            <el-option label="再担保业务" value="5"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料类型" prop="mateType">
          <el-select v-model="ruleForm.mateType" size="mini">
            <el-option label="请选择" value=""></el-option>
            <el-option label="基础材料" value="1"></el-option>
            <el-option label="反担保物材料" value="2"></el-option>
            <el-option label="法律文书" value="3"></el-option>
            <el-option label="保后材料" value="4"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料类别" prop="mateCategory">
          <el-select v-model="ruleForm.mateCategory" size="mini">
            <el-option label="请选择" value=""></el-option>
            <el-option label="企业材料" value="1"></el-option>
            <el-option label="相关报告" value="2"></el-option>
            <el-option label="个人反担保" value="3"></el-option>
            <el-option label="企业反担保" value="4"></el-option>
            <el-option label="抵质押物" value="5"></el-option>
            <el-option label="合同" value="6"></el-option>
            <el-option label="保后报告" value="7"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item>
          <el-button size="mini" type="primary" @click="submitForm('ruleForm')">查询</el-button>
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
        </my-form-item>
      </el-form>
    </div>
    <el-table stripe :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="60px" align="center" fixed="left" label="序号"></el-table-column>
      </el-table-column>
      <el-table-column v-for="(item,index) in showItemList" :width="item.width || '' " :key="index" :label="item.name">
        <template slot-scope="scope">
          <template v-if="!item.formatter">{{ scope.row[item.key] }}</template>
          <template v-else>
            <span v-text="item.formatter(scope.row, item)"></span>
          </template>
        </template>
      </el-table-column>
   
      <el-table-column prop="isUse" label="是否采用" align="center" width="80">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isUse" @change="checkedIsUse(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="isMust" label="是否必备" align="center" width="80">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isMust" @change="checkedIsMust(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="isOriginal" label="是否原件" align="center" width="80">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isOriginal" @change="checkedIsOriginal(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column label="操作" width="190px" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showEditDialog(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="primary" @click="setAuth(scope.$index, scope.row)">权限</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card style="text-align:right;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[ 10, 20,30, 40]" :page-size="pageSize" background layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
    </el-card>
    <!-- --------------------------------------------------------添加弹出框 -->
    <el-dialog title="新增管理" width="300px" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form size="mini" :style="style" :model="addForm" ref="addForm" :rules="rules" class="demo-ruleForm">
        <my-form-item label="资料名称" :label-width="formLabelWidth" prop="mateName">
          <el-input v-model="addForm.mateName"></el-input>
        </my-form-item>
        <my-form-item label="业务品种" :label-width="formLabelWidth" prop="serviceType">
          <el-select v-model="addForm.serviceType" placeholder="请选择业务品种" style="width:100%;">
            <el-option label="融资性担保" value="1"></el-option>
            <el-option label="非融资性担保" value="2"></el-option>
            <el-option label="综合授信" value="3"></el-option>
            <el-option label="委托担保" value="4"></el-option>
            <el-option label="再担保业务" value="5"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料类型" :label-width="formLabelWidth" prop="mateType">
          <el-select v-model="addForm.mateType" placeholder="请选择资料类型" style="width:100%;">
            <el-option label="基础材料" value="1"></el-option>
            <el-option label="反担保材料" value="2"></el-option>
            <el-option label="法律文物" value="3"></el-option>
            <el-option label="保后材料" value="4"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="资料等级" :label-width="formLabelWidth" prop="mateLevel">
          <el-select v-model="addForm.mateLevel" placeholder="请选择资料等级" style="width:100%;">
            <el-option label="一级" value="1"></el-option>
            <el-option label="二级" value="2"></el-option>
            <el-option label="三级" value="3"></el-option>
            <el-option label="四级" value="4"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料类别" :label-width="formLabelWidth" prop="mateCategory">
          <el-select v-model="addForm.mateCategory" placeholder="请选择资料类别" style="width:100%;">
            <el-option label="企业材料" value="1"></el-option>
            <el-option label="相关报告" value="2"></el-option>
            <el-option label="个人反担保" value="3"></el-option>
            <el-option label="企业反担保" value="4"></el-option>
            <el-option label="抵质押物" value="5"></el-option>
            <el-option label="合同" value="6"></el-option>
            <el-option label="保后报告" value="7"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料编号" :label-width="formLabelWidth" prop="mateCode">
          <el-input v-model="addForm.mateCode" disabled></el-input>
        </my-form-item>
        <my-form-item label="是否公用" :label-width="formLabelWidth" prop="isUse">
          <el-switch v-model="addForm.isUse" active-text="是" inactive-text="否" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" />

        </my-form-item>

        <my-form-item label="银行" :label-width="formLabelWidth" prop="bankName">
          <el-input type="textarea" v-model="addForm.bankName"></el-input>
        </my-form-item>
        <my-form-item label="备注" :label-width="formLabelWidth" prop="remarks">
          <el-input type="textarea" v-model="addForm.remarks"></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleAdd()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <!-- --------------------------------------------------------编辑弹出框 -->
    <el-dialog title="编辑管理" width="300px" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
      <el-form size="mini" :style="style" :model="editForm" ref="editForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <my-form-item label="资料名称" :label-width="formLabelWidth" prop="mateName">
          <el-input v-model="editForm.mateName" size="mini"></el-input>
        </my-form-item>
        <my-form-item label="业务品种" :label-width="formLabelWidth" prop="serviceType">
          <el-select v-model="editForm.serviceType" placeholder="请选择业务品种" size="mini" style="width:100%;">
            <el-option label="融资性担保" value="1"></el-option>
            <el-option label="非融资性担保" value="2"></el-option>
            <el-option label="综合授信" value="3"></el-option>
            <el-option label="委托担保" value="4"></el-option>
            <el-option label="再担保业务" value="5"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料类型" :label-width="formLabelWidth" prop="mateType">
          <el-select size="mini" v-model="editForm.mateType" placeholder="请选择资料类型" style="width:100%;">
            <el-option label="基础材料" value="1"></el-option>
            <el-option label="反担保材料" value="2"></el-option>
            <el-option label="法律文物" value="3"></el-option>
            <el-option label="保后材料" value="4"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="资料等级" :label-width="formLabelWidth" prop="mateLevel">
          <el-select v-model="editForm.mateLevel" placeholder="请选择资料等级" size="mini" style="width:100%;">
            <el-option label="一级" value="1"></el-option>
            <el-option label="二级" value="2"></el-option>
            <el-option label="三级" value="3"></el-option>
            <el-option label="四级" value="4"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料类别" :label-width="formLabelWidth" prop="mateCategory">
          <el-select v-model="editForm.mateCategory" placeholder="请选择资料类别" size="mini" style="width:100%;">
            <el-option label="企业材料" value="1"></el-option>
            <el-option label="相关报告" value="2"></el-option>
            <el-option label="个人反担保" value="3"></el-option>
            <el-option label="企业反担保" value="4"></el-option>
            <el-option label="抵质押物" value="5"></el-option>
            <el-option label="合同" value="6"></el-option>
            <el-option label="保后报告" value="7"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="资料编号" :label-width="formLabelWidth" prop="mateCode">
          <el-input v-model="editForm.mateCode" disabled size="mini"></el-input>
        </my-form-item>
        <my-form-item label="是否公用" :label-width="formLabelWidth" prop="isUse">
          <el-switch v-model="editForm.isUse" active-text="是" inactive-text="否" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" />

        </my-form-item>

        <my-form-item label="银行" :label-width="formLabelWidth" prop="bankName">
          <el-input type="textarea" v-model="editForm.bankName" size="mini"></el-input>
        </my-form-item>
        <my-form-item label="备注" :label-width="formLabelWidth" prop="remarks">
          <el-input type="textarea" v-model="editForm.remarks" size="mini"></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleEdit()" size="mini">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog width="70%" title="权限配置" :visible.sync="dialogQsVisible">
      <el-divider content-position="right">
        <el-button size="mini" type="primary" icon="el-icon-save" @click="handleNew">新 增</el-button>
        <el-button size="mini" @click="dialogQsVisible = false">关 闭</el-button>
      </el-divider>
      <el-table stripe :data="authList.authData" border style="width: 100%" height="250" >
    		<el-table-column type="index" align="center" label="序号" fixed="left" width="50"></el-table-column>
        <el-table-column prop="serviceTypeName" align="center" label="业务品种" width="120" ></el-table-column>
        <el-table-column prop="mateName" align="center" label="资料名称" width="120" ></el-table-column>
        <el-table-column prop="rolename" align="center" label="角色" width="100" ></el-table-column>
        <el-table-column prop="operatorname" align="center" label="操作权限" width="150" ></el-table-column>
        <el-table-column prop="conditions" align="center" label=执行条件 width="200" ></el-table-column>
        <el-table-column prop="remark" align="center" label="备注" ></el-table-column>
        <el-table-column label="操作" width="60px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDeleteQS(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="新增配置" :visible.sync="dialogQsVisible1" width="40%">
      <el-form size="mini" :style="style" :model="authForm" ref="authForm" :rules="authrules" class="demo-ruleForm">
        <my-form-item label="资料名称" :label-width="formLabelWidth" prop="mateName">
          <el-input v-model="authForm.mateName" disabled></el-input>
        </my-form-item>
        <my-form-item label="业务品种" :label-width="formLabelWidth" prop="serviceType">
          <el-select v-model="authForm.serviceType" style="width:100%;" disabled>
            <el-option label="融资性担保" value="1"></el-option>
            <el-option label="非融资性担保" value="2"></el-option>
            <el-option label="综合授信" value="3"></el-option>
            <el-option label="委托担保" value="4"></el-option>
            <el-option label="再担保业务" value="5"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="角色" :label-width="formLabelWidth" prop="rolename">
          <el-input v-model="authForm.rolename" placeholder="请选择角色" readonly>
            <el-button slot="append" icon="el-icon-search" @click="selectRole"></el-button>
          </el-input>
        </my-form-item>
        <my-form-item label="操作权限" :label-width="formLabelWidth" prop="operator">
          <el-checkbox-group v-model="authForm.operator">
            <el-checkbox
              v-for="item in OperatorEnums"
              :label="item.value"
              :key="item.value"
            >{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </my-form-item>
        <my-form-item label="执行条件" :label-width="formLabelWidth" prop="conditions">
          <el-input type="textarea" v-model="authForm.conditions" maxlength="200" placeholder="执行条件前缀是select count(1) from,填写内容例如：biz_project where STATUS='1' and id=?"></el-input>
        </my-form-item>
        <my-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input type="textarea" v-model="authForm.remark" maxlength="200"></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogQsVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveQS">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="40%" title="选择角色" :visible.sync="dialogRoleVisible">
      <div class="card">
        <el-input size="mini" v-model="roleName" placeholder="输入角色名称进行查询" style="width:200px"></el-input>
        <el-button type="primary" size="mini" @click="getRoleDataList">查询</el-button>
      </div>
      <el-table
        :data="roleData"
        ref="roleTable"
        border
        stripe
        @current-change="clickChange"
        style="width: 100%"
      >
        <el-table-column label="选择" width="55">
            <template slot-scope="scope">
                <el-radio  v-model="tableRadio" :label="scope.row"><i></i></el-radio>
            </template>
        </el-table-column>
        <el-table-column type="index" width="60" align="center"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleType" label="角色类型"></el-table-column>
      </el-table>
      <div style="text-align:right; padding:10px">
        <el-pagination
          @size-change="sizeChanger"
          @current-change="currentChanger"
          :current-page="currentPager"
          :page-sizes="[ 10,20,30, 40]"
          :page-size="pageSizer"
          background
          layout="total, sizes, prev, pager, next"
          :total="totalr"
        ></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRoleVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="getSelectRole" size="mini">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getList as getRoleList } from "@/pages/auth/roles/function";

const defaultFormThead = [
  { key: "mateCode", name: "资料编号", width: "170" },
  { key: "mateName", name: "资料名称" },
  {
    key: "mateType",
    name: "资料类型",
    formatter: row => {
      if (row.mateType === "1") {
        return "基础材料";
      } else if (row.mateType === "2") {
        return "反担保物材料";
      } else if (row.mateType === "3") {
        return "法律文书";
      } else {
        return "保后材料";
      }
    }
  },
  {
    key: "mateCategory",
    name: "资料类别",
    formatter: row => {
      if (row.mateCategory === "1") {
        return "企业材料";
      } else if (row.mateType === "2") {
        return "相关报告";
      } else if (row.mateType === "3") {
        return "个人反担保";
      } else if (row.mateType === "4") {
        return "企业反担保";
      } else if (row.mateType === "5") {
        return "抵质押物";
      } else if (row.mateType === "6") {
        return "合同";
      } else if (row.mateType === "7") {
        return "保后报告";
      } else {
        return "其他";
      }
    }
  },
  {
    key: "mateLevel",
    name: "资料等级",
    formatter: row => {
      if (row.mateLevel === "1") {
        return "一级";
      } else if (row.mateLevel === "2") {
        return "二级";
      } else if (row.mateLevel === "3") {
        return "三级";
      } else if (row.mateLevel === "4") {
        return "四级";
      }
    }
  }
];
import EnumSelector from "@/pages/comm/enumSelector";
export default {
  components: { EnumSelector },
  data() {
    return {
      roleData: [],
      totalr: 0,
      roleName: "",
      pageSizer: 10,
      currentPager: 1,
      dialogRoleVisible:false,
      tableRadio:{},

      OperatorEnums: [
          { "label": "只读", "value": "1" },
          { "label": "打印", "value": "2" },
          { "label": "下载", "value": "3" },
          { "label": "修改", "value": "4" },
          { "label": "删除", "value": "5" },
      ],
      dialogQsVisible1:false,
      dialogQsVisible:false,
      authList:{
        authData:[],
        mateRefId:'',
        mateName:'',
        serviceType:'',
      },      
      authForm:{
        id:'',
        mateRefId:'',
        roleid:'',
        rolename:'',
        operator:[],
        remark:'',   
        serviceType:'',
        mateName:'',    
        conditions:'',

      },
      authrules: {
        operator: [{
            required: true,
            message: "请选择操作",
            trigger: "change"
          }],
        roleid: [{
            required: true,
            message: "请选择角色",
            trigger: "change"
          }],
      },


      checkAll: true,
      isIndeterminate: false,
      allItemList: defaultFormThead,
      showItemList: defaultFormThead,
      formShow: false,
      dialogFormVisible: false,
      dialogEditVisible: false,
      offForm: true, //是否折叠
      folding: false, //表单是否超过一行
      formLabelWidth: "80px",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      ruleForm: {
        serviceType: "",
        mateType: "",
        mateCategory: ""
      },
      style: {},
      rules: {
        serviceType: [
          {
            required: true,
            message: "请选择业务品种",
            trigger: "change"
          }
        ],
        mateType: [
          {
            required: true,
            message: "请选择资料类型",
            trigger: "change"
          }
        ],
        mateName: [
          {
            required: true,
            message: "请输入资料名称",
            trigger: "blur"
          }
        ],
        mateCategory: [
          {
            required: true,
            message: "请选择资料类别",
            trigger: "change"
          }
        ],
        mateLevel: [
          {
            required: true,
            message: "请选择资料等级",
            trigger: "change"
          }
        ]
      },
      addForm: {
        serviceType: "",
        mateType: "",
        mateCode: "",
        mateName: "",
        mateLevel: "",
        mateCategory: "",
        bankName: "",
        remarks: "",
        isUse: "0"
      },
      editForm: {
        id: "",
        bankName: "",
        isUse: "",
        mateCategory: "",
        mateCode: "",
        mateLevel: "",
        mateName: "",
        mateType: "",
        remarks: "",
        serviceType: "",
        mateRefId: "",
        bankId: ""
      }
    };
  },

  mounted() {
    this.init();
    let formHeight = this.$refs.ruleForm.$el.clientHeight;
    if (formHeight > 62) {
      this.folding = true;
      this.style = {
        height: "62px",
        overflow: "hidden"
      };
    } else {
      this.folding = false;
      this.style = {
        height: "auto",
        overflow: "hidden"
      };
    }
  },
  computed: {},
  watch: {
    offForm: function(v) {
      if (v) {
        this.style = {
          height: "62px",
          overflow: "hidden"
        };
      } else {
        this.style = {
          height: "auto",
          overflow: "hidden"
        };
      }
    }
  },
  methods: {
    checkedIsUse(row) {
      let params = {
        isUse: row.isUse,
        id: row.id
      };
      this.$api
        .formPost("/api/biz/baseMaterial/upDateBaseMaterial", params)
        .then(res => {
          if (res.retHead.code === "0000000") {
            this.$message({
              message: "设置成功",
              type: "success"
            });
          } else {
            this.$message.error("设置失败");
          }
        });
    },
    checkedIsMust(row) {
      let params = {
        isMust: row.isMust,
        mateRefId: row.mateRefId
      };
      this.$api
        .formPost("/api/biz/baseMaterial/upDateBaseMaterialRef", params)
        .then(res => {
          console.log(res);
          if (res.retHead.code === "0000000") {
            this.$message({
              message: "设置成功",
              type: "success"
            });
          } else {
            this.$message.error("设置失败");
          }
        });
    },
    checkedIsOriginal(row) {
      let params = {
        isOriginal: row.isOriginal,
        mateRefId: row.mateRefId
      };
      this.$api
        .formPost("/api/biz/baseMaterial/upDateBaseMaterialRef", params)
        .then(res => {
          if (res.retHead.code === "0000000") {
            this.$message({
              message: "设置成功",
              type: "success"
            });
          } else {
            this.$message.error("设置失败");
          }
        });
    },
    //table翻译 资料类型
    mateTypeFor: function(row, column) {
      return row.mateType == "1"
        ? "基础材料"
        : row.mateType == "2"
          ? "反担保物材料"
          : row.mateType == "3" ? "法律文书" : "保后材料";
    },
    //table翻译 资料类别
    mateCategoryFor(row, column) {
      if (row.mateCategory === "1") {
        return "企业材料";
      } else if (row.mateType === "2") {
        return "相关报告";
      } else if (row.mateType === "3") {
        return "个人反担保";
      } else if (row.mateType === "4") {
        return "企业反担保";
      } else if (row.mateType === "5") {
        return "抵质押物";
      } else if (row.mateType === "6") {
        return "合同";
      } else if (row.mateType === "7") {
        return "保后报告";
      } else {
        return "其他";
      }
    },
    //table翻译 资料级别
    mateLevelFor: function(row, column) {
      return row.mateLevel == "1"
        ? "一级"
        : row.mateLevel == "2" ? "二级" : "暂无";
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "资料类型",
          "资料编号",
          "资料名称",
          "是否采用",
          "是否必备",
          "是否原件"
        ];
        const filterVal = [
          "mateType",
          "mateCode",
          "mateName",
          "isUse",
          "isMust",
          "isOriginal"
        ];
        const data = this.formatJson(filterVal, this.tableData);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list"
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === defaultFormThead.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < defaultFormThead.length;
    },
    handleCheckAllChange(val) {
      this.showItemList = val ? defaultFormThead : [];
      this.isIndeterminate = false;
    },
    sizeChange(n) {
      this.pageSize = n;
      this.init();
    },
    currentChange(n) {
      this.currentPage = n;
      this.init();
    },
    init() {
      let searchForm = {};
      searchForm.serviceType = this.ruleForm.serviceType;
      searchForm.mateType = this.ruleForm.mateType;
      searchForm.mateCategory = this.ruleForm.mateCategory;
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...searchForm
      };
      this.$api
        .formPost("/api/biz/baseMaterial/doGetMateRefList", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            for (var idx in res.retBody.list) {
              if (res.retBody.list[idx].isUse == "1") {
                res.retBody.list[idx].isUse = true;
              } else {
                res.retBody.list[idx].isUse = false;
              }
              if (res.retBody.list[idx].isMust == "1") {
                res.retBody.list[idx].isMust = true;
              } else {
                res.retBody.list[idx].isMust = false;
              }
              if (res.retBody.list[idx].isOriginal == "1") {
                res.retBody.list[idx].isOriginal = true;
              } else {
                res.retBody.list[idx].isOriginal = false;
              }
            }
            this.tableData = res.retBody.list;
            this.total = res.retBody.total;
            this.currentPage = res.retBody.pageNum;
          }
        });
    },
    showDialog() {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.resetForm("addForm");
      });
      this.form = {};
    },
    showEditDialog(index, row) {
      if (row.id) {
        this.editForm.id = row.id;
      }
      if (row.serviceType) {
        this.editForm.serviceType = row.serviceType;
      }
      if (row.mateType) {
        this.editForm.mateType = row.mateType;
      }
      if (row.mateCode) {
        this.editForm.mateCode = row.mateCode;
      }
      if (row.mateName) {
        this.editForm.mateName = row.mateName;
      }
      if (row.mateLevel) {
        this.editForm.mateLevel = row.mateLevel;
      }
      if (row.mateCategory) {
        this.editForm.mateCategory = row.mateCategory;
      }
      if (row.bankName) {
        this.editForm.bankName = row.bankName;
      }
      if (row.remarks) {
        this.editForm.remarks = row.remarks;
      }
      if (row.isUse) {
        this.editForm.isUse = row.isUse;
      }
      if (row.mateRefId) {
        this.editForm.mateRefId = row.mateRefId;
      }
      if (row.bankId) {
        this.editForm.bankId = row.bankId;
      }
      this.dialogEditVisible = true;
    },
    handleAdd() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          let addFormParams = {};
          addFormParams.serviceType = this.addForm.serviceType;
          addFormParams.mateType = this.addForm.mateType;
          addFormParams.mateCode = this.addForm.mateCode;
          addFormParams.mateName = this.addForm.mateName;
          addFormParams.isUse = this.addForm.isUse;
          addFormParams.mateLevel = this.addForm.mateLevel;
          addFormParams.mateCategory = this.addForm.mateCategory;
          addFormParams.bankName = this.addForm.bankName;
          addFormParams.remarks = this.addForm.remarks;
          this.$api
            .formPost("/api/biz/baseMaterial/doSave", addFormParams)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  message: "添加成功！",
                  type: "success"
                });
                this.dialogFormVisible = false;
                this.init();
              } else {
                this.$message({
                  message: "添加失败！",
                  type: "error"
                });
              }
            });
        } else {
          this.$message.error("请完善表单");
          return false;
        }
      });
    },
    handleEdit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let editFormParams = {};
          editFormParams.id = this.editForm.id;
          editFormParams.bankName = this.editForm.bankName;
          editFormParams.isUse = this.editForm.isUse;
          editFormParams.mateCategory = this.editForm.mateCategory;
          editFormParams.mateCode = this.editForm.mateCode;
          editFormParams.mateLevel = this.editForm.mateLevel;
          editFormParams.mateName = this.editForm.mateName;
          editFormParams.mateType = this.editForm.mateType;
          editFormParams.remarks = this.editForm.remarks;
          editFormParams.serviceType = this.editForm.serviceType;
          editFormParams.mateRefId = this.editForm.mateRefId;
          editFormParams.bankId = this.editForm.bankId;
          this.$api
            .formPost("/api/biz/baseMaterial/doModById", editFormParams)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message.success("执行成功！");
                this.init();
                this.dialogEditVisible = false;
              } else {
                this.$message.error("执行失败！");
              }
            });
        } else {
          this.$message.error("请完善表单");
          return false;
        }
      });
    },

    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api
            .formPost("/api/biz/baseMaterial/doRmById", {
              id: row.id,
              mateRefId: row.mateRefId
            })
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  message: "操作成功！",
                  type: "success"
                });
                this.init();
              } else {
                this.$message({
                  message: "操作失败！",
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    submitForm(formName) {
      this.init();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //================================================================
    setAuth(index, row){
      this.dialogQsVisible=true;
      this.authList.authData=[];
      this.authList.mateRefId=row.mateRefId;
      this.authList.mateName=row.mateName;
      this.authList.serviceType=row.serviceType;
      this.getAuthList(row.mateRefId);
    },
    handleNew(){
      this.dialogQsVisible1=true;
      this.authForm.id="";
      this.authForm.roleid="";
      this.authForm.rolename="";
      this.authForm.operator=[];
      this.authForm.remark="";
      this.authForm.conditions="";
      this.authForm.mateRefId=this.authList.mateRefId;
      this.authForm.mateName=this.authList.mateName;
      this.authForm.serviceType=this.authList.serviceType;
    },
    handleSaveQS(){
      this.$refs.authForm.validate(valid => {
        if (valid) {
          let editFormParams = {};
          editFormParams.id = this.authForm.id;
          editFormParams.roleid = this.authForm.roleid;
          editFormParams.operator = "";//;
          this.authForm.operator.forEach(el => {
            editFormParams.operator+=el+",";
          });
          editFormParams.remark = this.authForm.remark;
          editFormParams.conditions = this.authForm.conditions;
          editFormParams.mateRefId=this.authForm.mateRefId;
          this.$api
            .formPost("/api/biz/baseMateAuth/doSave", editFormParams)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message.success("执行成功！");
                this.getAuthList(this.authForm.mateRefId);
                this.dialogQsVisible1=false;
              } else {
                this.$message.error("执行失败！");
              }
            });
        } else {
          this.$message.error("请完善表单");
          return false;
        }
      });      

    },
    handleDeleteQS(index, row){
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api
            .formPost("/api/biz/baseMateAuth/doRmById", {
              id: row.id
            })
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  message: "操作成功！",
                  type: "success"
                });
                this.getAuthList(row.mateRefId);
              } else {
                this.$message({
                  message: "操作失败！",
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getAuthList(mateRefId){
      
        this.$api.formPost("/api/biz/baseMateAuth/doGetList", {
            mateRefId: mateRefId
          })
          .then(res => {
            if (res.retHead.code == "0000000") {
              this.authList.authData=res.retBody;
            } else {
              this.$message({
                message: "操作失败！",
                type: "error"
              });
            }
          });
    },
    sizeChanger(n) {
      this.pageSizer = n;
      this.getRoleDataList();
    },
    currentChanger(n) {
      this.currentPager = n;
      this.getRoleDataList();
    },
    clickChange (item) {
        this.tableRadio = item
    },
    getRoleDataList() {
      let params = {
        pageNum: this.currentPager,
        pageSize: this.pageSizer,
        roleName: this.roleName
      };
      getRoleList(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.roleData = res.retBody.list;
          this.totalr = res.retBody.total;
          this.currentPager = res.retBody.pageNum;
        }
      });
    },
    selectRole(){
      this.dialogRoleVisible=true;
      this.tableRadio={};
      this.getRoleDataList();
    },
    getSelectRole(){
      this.authForm.roleid=this.tableRadio.id;
      this.authForm.rolename=this.tableRadio.roleName;
      this.dialogRoleVisible=false;
    },

  },
  created() {}
};
</script>
<style lang='scss' scoped>
.btns {
  text-align: right;
}
.icon-arrow {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #f1f1f1;
  i {
    background-color: #fff;
    position: absolute;
    color: #999;
    bottom: -7px;
    margin-left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
}
</style>